<template>
  <div>
    <div
      :id="id"
      :class="className"
      :style="boxStyles"
    />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    xLabels: {
      type: Array,
      default: () => {
        return []
      }
    },
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    backgroundColor: {
      type: String,
      default: 'transparent'
    }
  },
  data() {
    return {
      chart: null,
      tempOptions: null,
      chartItemSerie: {
        name: '--',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          width: 1
        },
        itemStyle: {
          normal: {
            color: 'rgb(137, 189, 27)',
            borderColor: 'rgba(137, 189, 2, 0.27)',
            borderWidth: 8
          }
        },
        data: []
      },
      data2: [
        {
          name: '下单量',
          color: 'primary',
          data: [
            {
              date: '2',
              value: 1220
            },
            {
              date: '',
              value: 2182
            },
            {
              date: '',
              value: 3191
            },
            {
              date: '',
              value: 1134
            },
            {
              date: '',
              value: 2150
            },
            {
              date: '',
              value: 3120
            },
            {
              date: '',
              value: 2110
            },
            {
              date: '',
              value: 125
            },
            {
              date: '',
              value: 145
            },
            {
              date: '',
              value: 4122
            },
            {
              date: '',
              value: 7165
            },
            {
              date: '',
              value: 822
            }
          ]
        },
        {
          name: '成交量',
          color: 'success',
          items: []
        },
        {
          name: '退款量',
          color: 'warning',
          items: []
        }
      ]
    }
  },
  computed: {
    boxStyles() {
      return { height: this.height, width: this.width }
    },
    categorys() {
      if (this.data && this.data.length) {
        return this.data.map(item => {
          return item.name
        })
      }
      return []
    },
    series() {
      var defaultSerie = this.chartItemSerie
      if (this.data && this.data.length) {
        return this.data.map(item => {
          return { ...defaultSerie, ...item }
        })
      }
      return []
    },
    interval() {
      var lens = this.xLabels.length
      return Math.ceil(lens / 6)
    }
  },
  watch: {
    data() {
      this.initChart()
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      if (this.chart) {
        this.chart.dispose()
        this.chart = null
      }
      this.chart = echarts.init(document.getElementById(this.id))
      var options = {
        backgroundColor: this.backgroundColor,
        tooltip: {
          trigger: 'axis',
          textStyle: {
            fontStyle: 'normal',
            fontSize: 12
          }
        },
        legend: {
          bottom: 0,
          icon: 'rect',
          itemWidth: 15,
          itemHeight: 5,
          itemGap: 15,
          data: this.categorys,
          textStyle: {
            fontSize: 12,
            color: '#999999'
          },
          itemStyle: {
            borderWidth: 0
          }
        },
        grid: {
          top: 30,
          left: '2%',
          right: '2%',
          bottom: 30,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                opacity: 0.2
              }
            },
            axisLabel: {
              interval: this.interval
            },
            data: this.xLabels
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: this.series
      }

      this.tempOptions = options

      this.chart.setOption(options)
    }
  }
}
</script>
